<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./index2.css">
    <script src="../zuoye2/vue.global.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app" >
        <div v-for="(item,index) in dataList" key="index">
            <div class="kongbai">
                <div class="zhuye">
                    <img :src="item.head">
                    <div class="xingxi">
                        <div class="zi">&nbsp&nbsp姓名：{{item.name}}</div>
                        <div class="zi">&nbsp&nbsp年龄：{{item.age}}</div>
                        <div class="zi">&nbsp&nbsp性别：{{item.sex}}</div>
                        <div class="zi">&nbsp&nbsp总分：{{item.yw+item.sx+item.yy}}</div>
                    </div>
                    <div class="zhanshi" v-show="item.yw>=60 && item.sx>=60 && item.yy>=60">
                        <div>---</div>
                        <div>语文：{{item.yw}}</div>
                        <div>数学：{{item.sx}}</div>
                        <div>英语：{{item.yy}}</div>
                    </div>
                </div>
            </div>
        </div> 
    </div>
</body>
<script>
    const App = {
        data() {
            return {
                dataList:[
          {
            name: '张三',
            age: 20,
            sex: '男',
            head: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_360_360%2Fc8%2F5d%2F59%2Fc85d595ed206fa63bb7bc7d7d9d17353.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648255399&t=0999eef6cf2f4a0da0f06a37153f3a30',
            yw: 60,
            sx: 100,
            yy: 70,
          },
          {
            name: '李四',
            age: 20,
            sex: '男',
            head: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F36%2Faf%2F84%2F36af84b51d35d4e560fb92fa065fe1d6.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648255399&t=d24abc41a0a5bc533cf0d8e42257a3c1',
            yw: 50,
            sx: 100,
            yy: 40,
          },
          {
            name: '王五',
            age: 20,
            sex: '男',
            head: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2F22%2Fa6%2F5d%2F83%2Fae689318a827319a98788026bb32d99a.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648255399&t=b85a8b7e9a853d96055aab2182fd4379',
            yw: 80,
            sx: 100,
            yy: 60,
          },
        ],
                
            }
        }   
    }
    Vue.createApp(App).mount('#app')
</script>
</html>